<template>
    <v-app-bar app height="80">
        <!-- -->
        <v-app-bar-nav-icon @click.stop="$emit('unDrawer')"></v-app-bar-nav-icon>

        <v-toolbar-title>{{title}}</v-toolbar-title>

        <v-spacer></v-spacer>

        <div class="mx-3"/>

        <v-btn icon>
            <v-icon>
                mdi-bell
            </v-icon>
        </v-btn>

        <v-menu :offset-y="true" rounded="lg">
            <template v-slot:activator="{ on, attrs }">
                <v-btn icon v-bind="attrs" v-on="on">
                    <v-icon>
                        mdi-account
                    </v-icon>
                </v-btn>
            </template>
            <v-list>
                <v-list-item to="/userSetting">
                    <v-list-item-icon class="mr-1">
                        <v-icon>mdi-account</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>个人中心</v-list-item-title>
                </v-list-item>
                <v-list-item>
                    <v-list-item-icon class="mr-1">
                        <v-icon>mdi-calendar-text</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>任务</v-list-item-title>
                </v-list-item>
                <v-list-item>
                    <v-list-item-icon class="mr-1">
                        <v-icon>mdi-message</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>消息</v-list-item-title>
                </v-list-item>
                <v-list-item>
                    <v-list-item-action class="mx-auto">
                        <v-btn
                                outlined
                                color="indigo"
                                @click="logout"
                        >
                            退出登录
                        </v-btn>
                    </v-list-item-action>
                </v-list-item>
            </v-list>
        </v-menu>
    </v-app-bar>
</template>

<script>
    export default {
        name: "AppBar",
        computed: {
            title() {
                // return this.$route.name;
                return "码头后台管理";
            }
        },
        methods:{
            logout(){
                localStorage.removeItem("Authorization")
                this.$router.push("/login")
            }
        }
    }
</script>

<style scoped>

</style>